<template>
    <div class="settings-widget">
        <div class="settings-inner-blk p-0">
            <div class="sell-course-head comman-space">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <h3>我的试卷</h3>
                        <p>试卷列表：12</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="showing-list">
        <div class="row">
            <div class="col-lg-6">
                <div class="d-flex align-items-center">
                    <div class="view-icons">
                        <a href="course-grid.html" class="grid-view active"><i class="feather-grid"></i></a>
                        <a href="course-list.html" class="list-view"><i class="feather-list"></i></a>
                    </div>
                    <div class="show-result">
                        <h4>Showing 1-9 of 50 results</h4>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="show-filter add-course-info">
                    <form action="#">
                        <div class="row gx-2 align-items-center">
                            <div class="col-md-6 col-item">
                                <div class=" search-group">
                                    <i class="feather-search"></i>
                                    <input type="text" class="form-control" placeholder="输入关键字">
                                </div>
                            </div>
                            
                            <div class="col-md-6 col-lg-6 col-item">
                                <div class="form-group select-form mb-0">
                                    <select class="form-select select" id="sel1" name="sellist1">
                                        <option>进行中 </option>
                                        <option>已结课</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div v-for="i in 10" :key="i" class="col-lg-4 col-md-6 d-flex">
            <div class="course-box course-design d-flex ">
                <div class="product">
                    <div class="product-img">
                        <img class="img-fluid" alt="" src="assets/img/course/course-10.jpg">
                        <div class="price">
                            <h3>Scratch</h3>
                        </div>
                    </div>
                    <div class="product-content">
                        
                        <h3 class="title">
                            第15届蓝桥杯真题解析
                        </h3>
                        <p style="font-size: smaller;">课程介绍的内容，课程介绍的内容课程介绍的内容课程介绍的内容课程介</p>
                        <div class="course-info d-flex align-items-center">
                            <div class="rating-img d-flex align-items-center">
                                <img src="assets/img/icon/icon-01.svg" alt="">
                                <p>
                                    <span>
                                        选择:5
                                    </span>
                                    <span>
                                        判断:6
                                    </span>
                                    <span>
                                        编程:5
                                    </span>
                                </p>
                            </div>
                            <div class="course-view d-flex align-items-center">
                                <div class="all-btn all-category d-flex align-items-center">
                            
                                    <nuxt-link to="/teacher/paper-detail?id=1" class="btn btn-primary">
                                        进入试卷
                                    </nuxt-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    <app-pagination :total="total" :current="pageParam.current" :pageSize="pageParam.pageSize" @pageChange="hPageChange"/>
</template>
<script setup>
const pageParam = reactive({
    current: 1,
    pageSize: 10
})
const total = ref(12)

const hPageChange = (page) => {
    console.log(page)
    pageParam.current = page
}
</script>
<style scoped>
.all-category .btn-primary {
    min-width: 0;
    padding: 6px 12px;
}
.course-info {
    border-bottom: 0px solid #C7C7C7;
    padding-bottom: 0px;
}
</style>